<template>
	<scroll-view scroll-y class="public-scroll-view">
		<view class="view-model">
			<view class="view-model-title-container">
				<text class="view-model-title">flex-direction:row 横向布局</text>
			</view>
			<view class="view-model-item-container-row">
				<view class="view-model-item-A">A</view>
				<view class="view-model-item-B">B</view>
				<view class="view-model-item-C">C</view>
			</view>
		</view>

		<view class="view-model">
			<view class="view-model-title-container">
				<text class="view-model-title">flex-direction:row 纵向布局</text>
			</view>
			<view class="view-model-item-container-column">
				<view class="view-model-item-A">A</view>
				<view class="view-model-item-B">B</view>
				<view class="view-model-item-C">C</view>
			</view>
		</view>
		
		
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	.view-model {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 20rpx;
		padding-top: 20rpx;
	}

	.view-model-title-container {
		width: 95%;
	}

	.view-model-title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.view-model-item-container-row {
		display: flex;
		flex-direction: row;
		width: 95%;
		height: 200rpx;
				margin-top: 20rpx;
	}

	.view-model-item-container-column {
		display: flex;
		flex-direction: column;
		width: 95%;
		height: 500rpx;
		margin-top: 20rpx;
	}

	.view-model-item-A,
	.view-model-item-B,
	.view-model-item-C {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
	}

	.view-model-item-A {
		background-color: red;
	}

	.view-model-item-B {
		background-color: blue;
	}

	.view-model-item-C {
		background-color: green;
	}
</style>